<template>
  <div class="result_values">
    <TopHeader></TopHeader>
    <div class="mainTitle">
      <div class="container headArea">
        <div class="title">{{types===1?"您的职业兴趣类型是":types===2?"您的多元智能类型是":types===3?"您的职业价值观类型是":types===4?"您的MBTI性格类型是":"您的家庭成长环境类型是"}}</div>
        <div class="continueTestBtn" @click="commonJs.gosto('../process')">继续测试</div>
      </div>
    </div>
    <div class="container workValues">
      <div class="tip" v-show="resultTitleData.length > 1">您的报告有多份参考结果，请点击切换查看报告</div>
      <div class="boxShadow">
        <div class="topTab" v-show="resultTitleData.length > 1">
          <div class="tabList">
            <div v-for="(tabName, tabIndex) of resultTitleData" :key="tabIndex" :class="['tabItem', choTabIndex == tabIndex ? 'choTabIndex' : '']" @click="choTabIndex = tabIndex">{{ tabName }}</div>
          </div>
        </div>
        <div class="resultArea">
          <!-- 测试类型、图标 -->
          <div class="areaLeft">
            <div class="titleBox">
              <div class="type">{{types===1?"您的职业兴趣类型是":types===2?"您的多元智能类型是":types===3?"您的职业价值观类型是":types===4?"您的MBTI性格类型是":"您的家庭成长环境类型是"}}</div>
              <div class="name">{{ resultTitleData[choTabIndex] }}</div>
            </div>

            <!-- 职业兴趣 -->
            <div v-if="types == 1">
              <div id="echart_1" style="width: 100%; height: 360px"></div>
            </div>

            <!-- 多元智能测试报告 -->
            <div v-if="types == 2">
              <div id="echart_4" style="width: 100%; height: 360px"></div>
            </div>

            <!-- 职业价值观报告 -->
            <div v-if="types == 3">
              <div class="outerBarBox">
                <div class="test2Box">
                  <div class="sp1">
                    <span v-for="(item,indexs) in zyjzgResult" :key='indexs'>{{item}}</span>
                  </div>
                  <div class="sp2">
                    <div class="sp2_2" v-for="(its,$indexs) in zyjzgScore" :key='$indexs+20'>
                      <span v-bind:style="{'width':its*15+'px'}"></span>
                    </div>
                  </div>
                </div>
                <div class="test2bot">
                  <div class="sp1"></div>
                  <div class="sp2 flex1">
                    <div class="flex-h sp2_score">
                      <span class="flex1">2</span>
                      <span class="flex1">4</span>
                      <span class="flex1">6</span>
                      <span class="flex1">8</span>
                      <span class="flex1">10</span>
                      <span class="flex1">12</span>
                      <span class="flex1">14</span>
                      <span class="flex1">16</span>
                      <span class="flex1">18</span>
                      <span class="flex1">20</span>

                    </div>

                  </div>
                </div>
              </div>
            </div>

            <!-- MBTI测试 -->
            <div v-if="types == 4">
              <div class="mbtiChartArea">
                <div v-for="(item, index) of mbtiDatas" :key="index" class="mbtiItem">
                  <div class="itemTop">
                    <div class="type">{{ item.topType }}</div>
                    <div class="score">{{ item.topScore }}</div>
                    <div class="outerPoint">
                      <div class="innerPoint" :style="item.topScore >= item.bottomScore ? 'background: #FF8A00; height:' + (item.topScore * 10) +'px' : 'background: #E5E8ED; height:' + (item.topScore * 10) +'px'"></div>
                    </div>
                  </div>
                  <div class="itemBottom">
                    <div class="outerPoint">
                      <div class="innerPoint" :style="item.bottomScore > item.topScore ? 'background: #FF8A00; height:' + (item.bottomScore * 10) +'px' : 'background: #E5E8ED; height:' + (item.bottomScore * 10) +'px'"></div>
                    </div>
                    <div class="score">{{ item.bottomScore }}</div>
                    <div class="type">{{ item.bottomType }}</div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 成长环境测试 -->
            <div v-if="types == 5">
              <div id="echart_5" style="width: 100%; height: 360px"></div>
              <div class="scoreGroup">
                <div class="singleGrowupScore">
                  <div class="title">接纳子女</div>
                  <div class="scoreArea area_1">
                    <div class="score_block">
                      <div class="num">{{ score[0] }}<span>分</span></div>
                      <div class="name">慈爱</div>
                    </div>
                    <div class="score_block">
                      <div class="num">{{ score[1] }}<span>分</span></div>
                      <div class="name">随意</div>
                    </div>
                  </div>
                </div>
                <div class="singleGrowupScore">
                  <div class="title">回避子女</div>
                  <div class="scoreArea area_2">
                    <div class="score_block">
                      <div class="num">{{ score[2] }}<span>分</span></div>
                      <div class="name">慈爱</div>
                    </div>
                    <div class="score_block">
                      <div class="num">{{ score[3] }}<span>分</span></div>
                      <div class="name">随意</div>
                    </div>
                  </div>
                </div>
                <div class="singleGrowupScore">
                  <div class="title">过度关心子女</div>
                  <div class="scoreArea area_3">
                    <div class="score_block">
                      <div class="num">{{ score[4] }}<span>分</span></div>
                      <div class="name">过度要求</div>
                    </div>
                    <div class="score_block">
                      <div class="num">{{ score[5] }}<span>分</span></div>
                      <div class="name">过度保护</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 结果说明、推荐专业、职业特征、典型职行业等 -->
          <div class="areaRight">
            <div class="describeModel">
              <div class="title">结果说明</div>
              <div class="content">{{ getResultList[choTabIndex] ? getResultList[choTabIndex].result : '' }}</div>
            </div>
            <div class="describeModel">
              <div class="title">推荐专业</div>
              <div class="content">{{ getResultList[choTabIndex] ? getResultList[choTabIndex].majors : '' }}</div>
            </div>
            <div class="describeModel">
              <div class="title">职业特征</div>
              <div class="content">{{ getResultList[choTabIndex] ? getResultList[choTabIndex].feature : '' }}</div>
            </div>
            <div class="describeModel">
              <div class="title">典型职行业</div>
              <div class="content">{{ getResultList[choTabIndex] ? getResultList[choTabIndex].professions : '' }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ls from 'store2'
import axios from '~/plugins/axios'
import TopHeader from "~/components/topHeader";
import echarts from '@/plugins/echarts'
import { Message, Loading } from 'element-ui';
export default {
  components: {
    TopHeader
  },
  data() {
    return {
      loading: null,
      types: '', // 测试类型   1 --> 职业兴趣   2 --> 多元智能    3 --> 职业价值观   4 --> MBTI性格  5 --> 家庭成长环境
      score: [], // 测试分数
      result: '',
      resultTitleData: [], // 标题分类的数组
      choTabIndex: 0,
      allResultAnswer: [], // 单项测试的所有答案集合
      getResultList: [], // 获取的测试结果集合

      zyjzgResult: [], // 职业价值观类型
      zyjzgScore: [], // 职业价值观分数

      mbtiDatas: [],
      grownScore: [],

      icator: [{text: 'R型',max: 42},{text: 'S型',max: 42},{text: 'I型',max: 42},	{text: 'E型',max: 42},{text: 'A型',max: 42},{text: 'C型',max: 42}],

      icatorxz: [{text: '语言文字智能',max: 21},{text: '数理逻辑智能',max: 21},{text: '视觉空间智能',max: 21},{text: '自然观察智能',max: 21},{text: '音乐节奏智能',max: 21},{text: '身体律动智能',max: 21},{text: '人际社交智能',max: 21},{text: '个人内省智能',max: 21}]

    }
  },
  beforeMount() {
    let parameter = ls.get('resultPar')
    let stat = parameter.status;
    this.types = stat * 1;
    this.score = parameter.worthScore //正式
    this.allResultAnswer = parameter.allResultAnswer
  },
  mounted() {
    this.loading = Loading.service({
      lock: true,
      text: 'Loading',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });
    const score = this.score
    this.zyjzgScore = score
    switch(this.types) {
      case 1: // 职业兴趣
        this.getMax(this.getIndex(score))
        this.drawPie(this.score, this.icator)
        break;
      case 2: // 多元智能
        this.getDyznMax(score)
        this.drawZnTest(this.score, this.icatorxz)
        break;
      case 3: // 职业价值观
        this.getZyjzg(score)
        break;
      case 4: // MBTI测试
        this.getFinal(this.getmaxscore(this.score))
        break;
      default: // 成长环境
        this.grownScore[0] = score[0] + score[1];
        this.grownScore[1] = score[2] + score[3];
        this.grownScore[2] = score[4] + score[5];
        this.getGrownMax(this.getIndex(this.grownScore), score)
        this.drawYh(this.grownScore, this.score) 
    }
    setTimeout(() => {
      this.postMsgApi(JSON.stringify(this.score), this.result, this.types, JSON.stringify(this.allResultAnswer))
    }, 50)

  },
  methods: {
    getZyjzg(arrs) {
      let resultIndex = this.getIndex(arrs)
      
      let resules = ['利他主义', '美的追求', '创造发明', '智力刺激', '独立自主', '成就满足', '声望地位', '管理权力', '经济报酬', '安全稳定', '工作环境', '上司关系',
        '同事关系', '多样变化', '生活方式'
      ]
      let str = "";
      for (var i in resultIndex) {
        str += resules[resultIndex[i]] + "+"
      }
      if (str.length > 0) {
        str = str.substr(0, str.length - 1);
      }
      this.result = str

      this.zyjzgResult = resules
      this.resultTitleData = this.result.split("+");
    },
    getGrownMax(index, score) {
      let str = "";
      for (var i = 0; i < index.length; i++) {
        switch (index[i]) {
          case 0:				
            score[0] > score[1] ? str += '家庭接纳-慈爱' + '+' : str += '家庭接纳-随意' + '+'
            break;
          case 1:							
            score[2] > score[3] ? str += '家庭回避-忽视' + '+' : str += '家庭回避-拒绝' + '+'
            break;
          default:			
            score[4] > score[5] ? str += '家庭过度关心-过度要求' + '+' : str += '家庭过度关心-过度保护' + '+'
        }
      }
      if (str.length > 0) {
        str = str.substr(0, str.length - 1);
      }
      this.result = str
      this.resultTitleData = this.result.split("+");
    },
    getDyznMax(arrs) {
      let resultIndex = this.getIndex(arrs)

      let resules = ['言语-语言智能', '数理-逻辑智能', '视觉-空间智能', '自然-观察智能', '音乐-节奏智能', '身体-动觉智能', '人际-交际智能', '自我-内省智能']
      let str = "";
      for (var i in resultIndex) {
        str += resules[resultIndex[i]] + "+"
      }
      if (str.length > 0) {
        str = str.substr(0, str.length - 1);
      }
      this.result = str

      this.zyjzgResult = resules
      this.resultTitleData = this.result.split("+");
    },
    getmaxscore(arr) {
		
      let adtas = arr;
      let abc = '';
      adtas[0].count > adtas[1].count ? abc += adtas[0].typr : abc += adtas[1].typr
      adtas[2].count > adtas[3].count ? abc += adtas[2].typr : abc += adtas[3].typr
      adtas[4].count > adtas[5].count ? abc += adtas[4].typr : abc += adtas[5].typr
      adtas[6].count > adtas[7].count ? abc += adtas[6].typr : abc += adtas[7].typr

      this.mbtiDatas = [{
          topScore: adtas[0].count,
          topType: adtas[0].typr,
          bottomScore: adtas[1].count,
          bottomType: adtas[1].typr
        },
        {
          topScore: adtas[2].count,
          topType: adtas[2].typr,
          bottomScore: adtas[3].count,
          bottomType: adtas[3].typr
        },
        {
          topScore: adtas[6].count,
          topType: adtas[6].typr,
          bottomScore: adtas[7].count,
          bottomType: adtas[7].typr
        },
        {
          topScore: adtas[4].count,
          topType: adtas[4].typr,
          bottomScore: adtas[5].count,
          bottomType: adtas[5].typr
        }
      ]
      return abc;
    },
    getFinal(abc) {
		
      var result = ['ISTJ型(执行者/检查员)', 'ISFJ型(保护者/社工)', 'ISTP型(操作者/演奏者)', 'ISFP型(作曲家/艺术家)', 'INFJ型(陪伴者/咨询师)', 'INFP型(治疗师/导师)', 'INTJ型(科学家/智多星)', 'INTP型(建筑师/设计师)', 'ESTJ型(监督者/督导)', 'ESFJ型(服务者/销售员)', 'ESTP型(创业者/实干家)', 'ESFP型(表演者/开心果)', 'ENFJ型(教师/培训师)', 'ENFP型(倡导者/演说家)', 'ENTJ型(统帅/管理者)', 'ENTP型(策划者/发明家)']

      if (result.indexOf(abc) === -1) {
        var newArr = result.filter(item => item.indexOf(abc[0]) > -1)
        var newArr1 = newArr.filter(item => item.indexOf(abc[1]) > -1)
        var newArr2 = newArr1.filter(item => item.indexOf(abc[2]) > -1)
        var newArr3 = newArr2.filter(item => item.indexOf(abc[3]) > -1)
        
        this.result = newArr3[0];
      
        this.resultTitleData.push(newArr3[0])
      }
    },
    getMax(arrs) {
      let resules = ['R型(现实型)', 'S型(社会型)', 'I型(研究型)', 'E型(企业型)', 'A型(艺术型)', 'C型(事务型)']
      let str = "";
      for (var i in arrs) {
        str += resules[arrs[i]] + "+"
      }
      if (str.length > 0) {
        str = str.substr(0, str.length - 1);
      }
      this.result = str
      this.resultTitleData = this.result.split("+");

    },



    // 保存单项测试 
    postMsgApi(jsonStr, result, tps, allResult) {
      axios.post('/outcome', {
        "type": tps,
        "result_set": jsonStr,
        "result": result,
        'result_answer': allResult
      }).then(res => {
        this.postResultApi(tps)
      }).catch((error) => {
        Message.error('服务器故障');
        this.loading.close()
        this.$router.replace({ path: '../process' })
      })
    },
    // 获取单项测评结果
    postResultApi(tps) {
      axios.get('/outcome', { type: tps }).then(res => {
        this.getResultList = res.data
        this.resultTitleData = res.result.split("+");
      }).catch((error) => {
        Message.error('服务器故障');
      }).finally(() => {
        this.loading.close()
      })
    },
    // 获取最大值，并形成数组
    getIndex(ary) {
      let max = Math.max.apply(null, ary);
      
      let index;
      let are = []
      for (var i = 0, len = ary.length; i < len; i++) {
        if (ary[i] == max) {
          index = i;
          are.push(i)
        }
      }
      return are;
    },



    drawYh(bigData, smData) {
      var chart = echarts.init(document.getElementById("echart_5"));
      var option = {
        calculable: true,
        series: [{
            name: '',
            type: 'pie',
            radius: [0, 100],

            // for funnel
            x: '40%',
            width: '40%',
            funnelAlign: 'right',
            max: 10,

            itemStyle: {
              normal: {
                label: {
                  show: false,
                  position: 'outer',
                  // formatter: '{c}'//多值的嵌套
                },
                labelLine: {
                  show: false
                }
              }
            },
            data: [{
                value: smData[0],
                itemStyle: {
                  color: '#03A9F4'
                }
              },
              {
                value: smData[1],
                itemStyle: {
                  color: '#4FC3F7'
                }
              },
              {
                value: smData[2],
                itemStyle: {
                  color: '#FFB300'
                }

              }, ,
              {
                value: smData[3],
                itemStyle: {
                  color: '#FFD54F'
                }

              },

              ,
              {
                value: smData[4],
                itemStyle: {
                  color: '#FF8A65'
                }

              }, ,
              {
                value: smData[5],
                itemStyle: {
                  color: '#FFAB91'
                }

              }
            ]

          },

          {
            name: '',
            type: 'pie',
            radius: [80, 100],
            x: '60%',
            width: '35%',		
            max: 10,			
            data: [{
                value: bigData[0],
                itemStyle: {
                  color: '#ecfafc'
                }
              },
              {
                value: bigData[1],
                itemStyle: {
                  color: '#fffbdc'
                }
              },
              {
                value: bigData[2],
                itemStyle: {
                  color: '#fdf2f1'
                }
              }
            ]
          }
        ]
      };
      chart.setOption(option);
    },
    // 画雷达图
    drawZnTest(scores, indtas) {
      var chart = echarts.init(document.getElementById("echart_4"));
      var option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          x: 'center',
          data: ['']
        },

        toolbox: {
          show: false,
          feature: {
            mark: {
              show: true
            },
            dataView: {
              show: true,
              readOnly: false
            },
            restore: {
              show: false
            },
            saveAsImage: {
              show: false
            }
          }
        },
        textStyle: {
          color: "#222", // 文字颜色
          fontSize: '12px'
        },
        calculable: true,
        polar: [{
          indicator: indtas,
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: '#EEEEEE' // 图表背景网格线的颜色
            }
          },
          radius: 100
        }],
        series: [{
          name: '',
          type: 'radar',
          symbol: "none", // 去掉图表中各个图区域的边框线拐点
          itemStyle: {
            normal: {
              color: "rgba(0,0,0,0)", // 图表中各个图区域的边框线拐点颜色
              lineStyle: {
                color: "#FF8A00" // 图表中各个图区域的边框线颜色
              },
              areaStyle: {
                type: 'default',
                color: ["#FF8A00"] // 图表背景网格的颜色
              }
            }
          },
          data: [{
            value: scores,
            name: '职业兴趣测试'
          }]
        }]
      }
      chart.setOption(option);
    },
    drawPie(scores, indtas) {
      var chart = echarts.init(document.getElementById("echart_1"));
      var option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          x: 'center',
          data: ['']
        },

        toolbox: {
          show: false,
          feature: {
            mark: {
              show: true
            },
            dataView: {
              show: true,
              readOnly: false
            },
            restore: {
              show: false
            },
            saveAsImage: {
              show: false
            }
          }
        },
        textStyle: {
          color: "#222", // 文字颜色
          fontWeight: "bold"
        },
        calculable: true,
        polar: [{
          indicator: indtas,
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: '#EEEEEE' // 图表背景网格线的颜色
            }
          },
          radius: 120
        }],
        series: [{
          name: '',
          type: 'radar',
          symbol: "none", // 去掉图表中各个图区域的边框线拐点
          itemStyle: {
            normal: {
              color: "rgba(0,0,0,0)", // 图表中各个图区域的边框线拐点颜色
              lineStyle: {
                color: "#FF8A00" // 图表中各个图区域的边框线颜色
              },
              areaStyle: {
                type: 'default',
                color: ["#FF8A00"] // 图表背景网格的颜色
              }
            }
          },
          data: [{
            value: scores,
            name: '职业兴趣测试'
          }]
        }]
      }
      chart.setOption(option);
    }
  }
}
</script>

<style lang="less" scoped>
  @defaultColor: #1C2227;
  @sxColor: #FF8A00;
  .result_values {
    padding-bottom: 100px;
    .mainTitle {
      width: 100%;
      height: 120px;
      border: 2px solid rgba(204,204,204,0.3);
      .headArea {
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title {
          color: #1C2227;
          font-size: 22px;
          line-height: 29px;
          font-weight: bold;
        }
        .continueTestBtn {
          width: 118px;
          height: 38px;
          line-height: 38px;
          text-align: center;
          border-radius: 2px;
          background: @sxColor;
          color: #fff;
          font-size: 14px;
          font-weight: bold;
          cursor: pointer;
        }
      }
    }
    .workValues {
      margin-top: 32px;
      .tip {
        color: @defaultColor;
        font-size: 14px;
        line-height: 19px;
        margin-bottom: 24px;
      }
      .boxShadow {
        box-shadow: 0px 0px 10px 0px rgba(204,204,204,0.3);
        .topTab {
          .tabList {
            width: 100%;
            background: #FAFAFC;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
            .tabItem {
              min-width: 144px;
              padding: 0 15px;
              height: 40px;
              line-height: 40px;
              text-align: center;
              background: #FAFAFC;
              color: #6F7880;
              font-size: 14px;
              cursor: pointer;
            }
            .choTabIndex {
              background: #fff;
              color: @sxColor;
            }
          }
        }
        .resultArea {
          width: 100%;
          height: 961px;
          padding: 40px;
          border-radius: 2px 0px 0px 2px;
          display: flex;
          justify-content: flex-start;
          .areaLeft {
            width: 392px;
            margin-right: 40px;
            .titleBox {
              width: 100%;
              height: 120px;
              padding: 15px 0;
              background: #FAFAFC;
              border-radius: 6px;
              text-align: center;
              // margin-bottom: 56px;
              .type {
                color: @defaultColor;
                font-size: 16px;
                line-height: 44px;
              }
              .name {
                font-size: 22px;
                font-weight: bold;
                color: @sxColor;
              }
            }
            .outerBarBox {
              margin-top: 64px;
              width: 100%;
              overflow: hidden;
              .test2Box {
                width: 100%;
                height: 674px;
                display: flex;
                justify-content: flex-start;
  
                .sp1 {
                  padding-top: 17px;
                  width: 56px;
                  margin-right: 17px;
                  span {
                    display: block;
                    text-align: center;
                    font-size: 14px;
                    height: 27px;
                    line-height: 27px;
                    font-weight: bold;
                    margin-bottom: 16px;
                    color: #222;
                  }
                }
  
                // 20 - 5rem 0.25rem
  
                .sp2 {
                  flex: 1;
                  height: auto;
                  // background: #EEEEEE;
                  border: 1px solid #E5E8ED;
                  background: linear-gradient(to right, #FEFEFE 0%, #E5E8ED 100%);
                  overflow: hidden;
                  padding: 17px 0 24px;
  
                  .sp2_2 {
                    margin-bottom: 16px;
                    padding: 7px 0;
                    span {
                      display: block;
                      height: 13px;
                      background: @sxColor;
                      border-radius: 0px 10px 10px 0px;
                    }
                  }
  
  
  
                }
              }
              .test2bot {
                width: 100%;
                height: 56px;
                display: flex;
                justify-content: flex-start;
  
                .sp1 {
                  width: 56px;
                  height: 27px;
                  margin-right: 17px;
                }
  
                .sp2 {
                  height: 27px;
  
                  .sp2_score {
                    width: 100%;
                    height: 27px;
                    line-height: 27px;
  
                    span {
                      display: inline-block;
                      width: 26px;
                      text-align: right;
                      font-size: 12px;
                      font-weight: bold;
                      color: #999;
                    }
                  }
                }
              }
            }

            .scoreGroup {
              .singleGrowupScore {
                .title {
                  color: @defaultColor;
                  font-size: 14px;
                  line-height: 26px;
                  margin-bottom: 16px;
                }
                .scoreArea {
                  width: 376px;
                  height: 64px;
                  border-radius: 4px;
                  // opacity: 0.6;
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;
                  margin-bottom: 35px;
                  .score_block {
                    width: 175px;
                    padding-left: 16px;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    .num {
                      width: 56px;
                      height: 28px;
                      border-radius: 6px;
                      line-height: 26px;
                      text-align: center;
                      margin-right: 16px;
                      color: #fff;
                      font-size: 18px;
                      span {
                        font-size: 14px;
                        margin-left: 4px;
                      }
                    }
                    .name {
                      font-size: 16px;
                      line-height: 26px;
                    }
                  }

                }
                .area_1 { 
                  background: #E0F7FA;
                  .score_block {
                    .num {
                      background: #03A9F4;
                    }
                    .name {
                      color: #02A5F1;
                    }
                  }
                  .score_block:last-child .num { background: #81D4FA; }
                }
                .area_2 { 
                  background: #FFF9C4;
                  .score_block {
                    .num {
                      background: #FFB300;
                    }
                    .name {
                      color: #FFB300;
                    }
                  }
                  .score_block:last-child .num { background: #FFD54F; }
                }
                .area_3 { 
                  background: #FBE9E7; 
                  .score_block {
                    .num {
                      background: #FF8A65;
                    }
                    .name {
                      color: #FF8A65;
                    }
                  }
                  .score_block:last-child .num { background: #FFAB91; }
                }
              }
            }

            .mbtiChartArea {
              margin-top: 32px;
              width: 100%;
              height: 586px;
              padding: 25px 64px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .mbtiItem {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                flex-direction: column;
                .itemTop, .itemBottom {
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;
                  flex-direction: column;
                  .type {
                    color: #222;
                    font-size: 18px;
                    height: 32px;
                    line-height: 24px;
                    font-weight: bold;
                    margin-bottom: 12px;
                  }
                  .score {
                    color: #FF8A00;
                    font-size: 22px;
                    font-weight: bold;
                    height: 32px;
                    line-height: 29px;
                    margin-bottom: 13px;
                  }
                  .outerPoint {
                    width: 16px;
                    height: 150px;
                    background: #FAFAFC;
                    border-top-left-radius: 16px;
                    border-top-right-radius: 16px;
                    .innerPoint {
                      width: 16px;
                      max-height: 150px;
                      background: #FF8A00;
                      border-top-left-radius: 16px;
                      border-top-right-radius: 16px;
                    }
                  }
                }
                .itemTop {
                  .outerPoint {
                    position: relative;
                    .innerPoint {
                      position: absolute;
                      bottom: 0;
                      left: 0;
                    }
                  }
                }
                .itemBottom {
                  margin-top: 8px;
                  .outerPoint {
                    border-bottom-left-radius: 16px;
                    border-bottom-right-radius: 16px;
                    border-top-left-radius: 0;
                    border-top-right-radius: 0;
                    margin-bottom: 12px;
                    .innerPoint {
                      border-bottom-left-radius: 16px;
                      border-bottom-right-radius: 16px;
                      border-top-left-radius: 0;
                      border-top-right-radius: 0;
                    }
                  }
                  .score {
                    margin-bottom: 13px;
                  }
                  .type {
                    margin-bottom: 0;
                  }
                }
              }
            }

          }
          .areaRight {
            flex: 1;
            .describeModel {
              margin-bottom: 48px;
              .title {
                color: @defaultColor;
                font-size: 16px;
                line-height: 28px;
                font-weight: bold;
                margin-bottom: 16px;
              }
              .content {
                color: @defaultColor;
                font-size: 14px;
                line-height: 26px;
              }
            }
          }
        }
      }
    }
  }

</style>